import React, { useState } from 'react'
import { Form, Input, Button, Checkbox, Card, Row, Col, Typography, Select, message } from 'antd'
import { UserOutlined, LockOutlined, MailOutlined, TeamOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router'
import './index.css'

const { Title } = Typography;
const { Option } = Select;

const RegisterPage = () => {
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();
    const router = useNavigate()
    const onFinish = (values: any) => {
        setLoading(true);
        // 这里添加注册逻辑
        console.log('Received values of form: ', values);

        // 模拟API请求
        setTimeout(() => {
            setLoading(false);
            message.success('注册成功！即将跳转到登录页面...');
            // 注册成功后的跳转逻辑
            // 可以使用history.push('/login')进行页面跳转
        }, 1500);
    };

    return (
        <div className="register-container">
            <div className="background-pattern"></div>
            <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
                <Col className=''>
                    <Card className="registerbg-card"></Card>
                </Col>
                <Col xs={20} sm={16} md={12} lg={8} xl={6}>
                    <Card className="register-card">
                        <div className="register-header">
                            <Title level={2} style={{ textAlign: 'center', margin: 0 }}>
                                企业办公系统
                            </Title>
                            <p className="register-subtitle">创建您的企业账号</p>
                        </div>

                        <Form
                            form={form}
                            name="register"
                            className="register-form"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                        >

                            <Form.Item
                                name="username"
                                rules={[{ required: true, message: '请输入用户名!' }]}
                            >
                                <Input
                                    prefix={<UserOutlined />}
                                    placeholder="用户名"
                                    size="large"
                                />
                            </Form.Item>

                            <Form.Item
                                name="email"
                                rules={[
                                    { required: true, message: '请输入邮箱!' },
                                    { type: 'email', message: '请输入有效的邮箱地址!' }
                                ]}
                            >
                                <Input
                                    prefix={<MailOutlined />}
                                    placeholder="邮箱"
                                    size="large"
                                />
                            </Form.Item>

                            <Form.Item
                                name="password"
                                rules={[
                                    { required: true, message: '请输入密码!' },
                                    { min: 8, message: '密码至少需要8个字符!' }
                                ]}
                            >
                                <Input
                                    prefix={<LockOutlined />}
                                    type="password"
                                    placeholder="密码"
                                    size="large"
                                />
                            </Form.Item>

                            <Form.Item
                                name="confirmPassword"
                                dependencies={['password']}
                                rules={[
                                    { required: true, message: '请确认密码!' },
                                    ({ getFieldValue }) => ({
                                        validator(_, value) {
                                            if (!value || getFieldValue('password') === value) {
                                                return Promise.resolve();
                                            }
                                            return Promise.reject(new Error('两次输入的密码不一致!'));
                                        },
                                    }),
                                ]}
                            >
                                <Input
                                    prefix={<LockOutlined />}
                                    type="password"
                                    placeholder="确认密码"
                                    size="large"
                                />
                            </Form.Item>

                            <Form.Item>
                                <Form.Item name="agreeTerms" valuePropName="checked" noStyle>
                                    <Checkbox>我已阅读并同意<a href="#terms">服务条款</a>和<a href="#privacy">隐私政策</a></Checkbox>
                                </Form.Item>
                            </Form.Item>

                            <Form.Item>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    className="register-form-button"
                                    loading={loading}
                                    block
                                    size="large"
                                >
                                    注册
                                </Button>
                            </Form.Item>

                            <div className="register-footer">
                                已有账号? <a onClick={() => router('/login')}>立即登录</a>
                            </div>
                        </Form>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default RegisterPage